<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<u-sticky offset-top="0" style="top: 0;">
			<view class="header-section">
				<view class="top-bar">
					<view class="back-btn" @click="goBack">
						<u-icon name="arrow-left" size="24"></u-icon>
					</view>

					<view class="city-selector" @click="selectCity">
						<u-icon name="map" color="#fa436a" size="22"></u-icon>
						<text class="city-name">{{ currentCity }}</text>
					</view>

					<view class="search-wrapper">
						<u-input placeholder="请输入搜索内容" border="surround" v-model="searchValue" @change="change"
							shape="circle" suffixIcon="search"></u-input>
					</view>

					<view class="location-btn" @click="getCurrentLocation">
                        <u-icon name="map" size="24" color="#fa436a"></u-icon>
                    </view>
				</view>

				<!-- 日期选择 -->
				<view class="date-section" @click="showDatePicker">
					<view class="date-item">
						<text class="date-label">入住</text>
						<text class="date-value">{{ checkInDate }}</text>
					</view>
					<view class="nights-info">
						<text class="nights">共{{ nightsCount }}晚</text>
					</view>
					<view class="date-item">
						<text class="date-label">离店</text>
						<text class="date-value">{{ checkOutDate }}</text>
					</view>
				</view>
			</view>

			<!-- 筛选栏 -->
			<view class="filter-section">
				<view class="filter-item" :class="{ active: currentSort !== '综合排序' }" @click="showSortMenu">
					<text>{{ currentSort }}</text>
					<text class="yticon icon-down"></text>
				</view>
				<view class="filter-item" :class="{ active: guestCount > 0 }" @click="showGuestMenu">
					<text>{{ guestCount > 0 ? guestCount + '人' : '人数' }}</text>
					<text class="yticon icon-down"></text>
				</view>
				<view class="filter-item" :class="{ active: selectedLocation }" @click="showLocationMenu">
					<text>{{ selectedLocation || '位置' }}</text>
					<text class="yticon icon-down"></text>
				</view>
				<view class="filter-item" :class="{ active: priceRange }" @click="showPriceMenu">
					<text>{{ priceRange || '价格' }}</text>
					<text class="yticon icon-down"></text>
				</view>
				<view class="filter-btn" :class="{ active: hasActiveFilters }" @click="showFilterPanel">
					<text class="yticon icon-filter"></text>
					<view class="filter-dot" v-if="hasActiveFilters"></view>
				</view>
			</view>

			<!-- 标签栏 -->
			<view class="tag-section">
				<scroll-view class="tag-scroll" scroll-x :show-scrollbar="false">
					<view class="tag-wrapper">
						<view v-for="(tag, index) in tagList" :key="index" class="tag-item"
							:class="{ active: tag.active }" @click="toggleTag(index)">
							<text>{{ tag.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 酒店数量统计 -->
			<view class="hotel-count">
				<text>为您找到 {{ totalCount }} 家酒店</text>
			</view>
		</u-sticky>

		<!-- 日历组件 -->
		<u-calendar startText="入住" endText="离店" confirmDisabledText="请选择离店日期" :show="calendarVisible" mode="range"
			@confirm="confirm" @close="calendarVisible = false" ref="calendar">
		</u-calendar>

		<!-- 酒店列表 -->
		<scroll-view class="hotel-list" scroll-y :show-scrollbar="false" @scrolltolower="loadMore"
			refresher-enabled="true" @refresherrefresh="refreshData" :refresher-triggered="isRefreshing">
			<view v-for="(hotel, index) in hotelList" :key="index" class="hotel-item" @click="goToHotelDetail(hotel)">
				<view class="hotel-image">
					<image :src="hotel.image" mode="aspectFill" @error="handleImageError"></image>
					<!-- 收藏按钮暂时隐藏 -->
					<!-- <view class="favorite-btn" @click.stop="toggleFavorite(index)">
						<text class="yticon" :class="hotel.isFavorite ? 'icon-heart-fill' : 'icon-heart'"></text>
					</view> -->
					<view class="discount-tag" v-if="hotel.discount">
						<text>{{ hotel.discount }}</text>
					</view>
				</view>

				<view class="hotel-info">
					<view class="hotel-name">{{ hotel.name }}</view>
					<view class="rating-section">
						<view class="rating-box">
							<text class="rating">{{ hotel.rating }}</text>
						</view>
						<text class="reviews">{{ hotel.reviews }}条评论</text>
						<view class="star-rating">
							<text v-for="(star, starIndex) in 5" :key="starIndex" class="star"
								:class="{ filled: starIndex < Math.floor(hotel.rating) }">★</text>
						</view>
					</view>
					<view class="location-info">
						<text class="yticon icon-location"></text>
						<text class="distance">距您{{ hotel.distance }}</text>
						<text class="address">{{ hotel.address }}</text>
					</view>
					<view class="hotel-tags">
						<text v-for="(tag, tagIndex) in hotel.tags" :key="tagIndex" class="hotel-tag">{{ tag }}</text>
					</view>
					<view class="price-section">
						<view class="left-info">
							<view class="coupon-tag" v-if="hotel.hasCoupon">
								<text>可用券</text>
							</view>
							<view class="breakfast-tag" v-if="hotel.hasBreakfast">
								<text>含早</text>
							</view>
						</view>
						<view class="price-info">
							<text class="original-price" v-if="hotel.originalPrice !== hotel.currentPrice">¥{{
								hotel.originalPrice }}</text>
							<view class="current-price-row">
								<text class="current-price">¥{{ hotel.currentPrice }}</text>
								<text class="price-unit">起</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="isLoading">
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 没有更多数据 -->
			<view class="no-more" v-if="!hasMore && hotelList.length > 0">
				<text>没有更多数据了</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="hotelList.length === 0 && !isLoading">
				<image src="/static/temp/c3.png" class="empty-image"></image>
				<text class="empty-text">暂无酒店信息</text>
				<text class="empty-tip">请尝试调整筛选条件</text>
			</view>
		</scroll-view>

		<city-select v-model="citySelectVisible" @city-change="cityChange" @input="closeCitySelect"></city-select>
	</view>
</template>

<script>
import citySelect from '../../components/citySelect/u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			currentCity: '西安',
			checkInDate: '04.19',
			checkOutDate: '04.20',
			nightsCount: 1,
			currentSort: '综合排序',
			guestCount: 0,
			selectedLocation: '',
			priceRange: '',
			totalCount: 128,
			isRefreshing: false,
			isLoading: false,
			hasMore: true,
			citySelectVisible: false,
			calendarVisible: false,
			tagList: [
				{ name: '新房特惠', active: false },
				{ name: '酒店套餐', active: false },
				{ name: '大床房', active: false },
				{ name: '家庭房', active: false },
				{ name: '免费停车', active: false },
				{ name: '可取消', active: false },
				{ name: '含早餐', active: false }
			],
			hotelList: [
				{
					id: 1,
					name: '轻住·卡尔顿精品酒店(高新区财富中心店)',
					image: '/static/temp/cate1.jpg',
					rating: 5.0,
					reviews: 123,
					distance: '2.3km',
					address: '西安高新区高新路8号',
					tags: ['夜景好看', '长租优惠', '很干净', '可带宠物'],
					originalPrice: 328,
					currentPrice: 200,
					hasCoupon: true,
					hasBreakfast: true,
					isFavorite: false,
					discount: '限时8折'
				},
				{
					id: 2,
					name: '松子曼悦酒店（高新国际会展中心店）',
					image: '/static/temp/cate2.jpg',
					rating: 4.8,
					reviews: 456,
					distance: '1.8km',
					address: '西安高新区科技路66号',
					tags: ['夜景好看', '长租优惠', '很干净', '可带宠物'],
					originalPrice: 268,
					currentPrice: 188,
					hasCoupon: true,
					hasBreakfast: false,
					isFavorite: true,
					discount: ''
				},
				{
					id: 3,
					name: '西安浦迪会号酒店',
					image: '/static/temp/cate3.jpg',
					rating: 4.9,
					reviews: 89,
					distance: '3.1km',
					address: '西安雁塔区小寨东路126号',
					tags: ['地理位置好', '服务周到', '很干净', '免费WiFi'],
					originalPrice: 299,
					currentPrice: 220,
					hasCoupon: false,
					hasBreakfast: true,
					isFavorite: false,
					discount: '新店特惠'
				},
				{
					id: 4,
					name: '西朵雅影院酒店',
					image: '/static/temp/cate4.jpg',
					rating: 4.7,
					reviews: 234,
					distance: '2.5km',
					address: '西安碑林区南大街1号',
					tags: ['影院主题', '情侣首选', '很干净', '可带宠物'],
					originalPrice: 388,
					currentPrice: 298,
					hasCoupon: true,
					hasBreakfast: false,
					isFavorite: false,
					discount: ''
				},
				{
					id: 5,
					name: '罗曼快捷酒店（兆隆购物广场店）',
					image: '/static/temp/cate5.jpg',
					rating: 4.6,
					reviews: 567,
					distance: '4.2km',
					address: '西安未央区凤城二路18号',
					tags: ['性价比高', '交通便利', '很干净', '免费停车'],
					originalPrice: 158,
					currentPrice: 128,
					hasCoupon: true,
					hasBreakfast: true,
					isFavorite: false,
					discount: ''
				}
			],
			statusBarHeight: 0
		}
	},
	onLoad() {
		// 设置状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;

		// 模拟获取当前位置城市
		this.getCurrentCityInfo();
	},
	computed: {
		hasActiveFilters() {
			return this.guestCount > 0 || this.selectedLocation || this.priceRange || this.currentSort !== '综合排序';
		},
		// 计算入住天数  
		calculatedNights() {
			// 这里简化处理，实际应该根据具体日期计算
			return this.nightsCount;
		}
	},
	methods: {
		getCurrentCityInfo() {
			// 模拟获取当前城市信息
			setTimeout(() => {
				console.log('获取到当前城市：', this.currentCity);
			}, 500);
		},
		goBack() {
			uni.navigateBack();
		},
		selectCity() {
			this.citySelectVisible = true;
		},
		goToSearch() {
			// 显示搜索输入框
			uni.showModal({
				title: '搜索酒店',
				placeholderText: '请输入景点/地址/房源名',
				editable: true,
				success: (res) => {
					if (res.confirm && res.content) {
						this.searchHotels(res.content);
					}
				}
			});
		},
		searchHotels(keyword) {
			// 搜索酒店
			uni.showLoading({
				title: '搜索中...'
			});

			// 模拟搜索
			setTimeout(() => {
				uni.hideLoading();

				// 简单的模糊搜索
				const filteredHotels = this.hotelList.filter(hotel =>
					hotel.name.includes(keyword) ||
					hotel.address.includes(keyword) ||
					hotel.tags.some(tag => tag.includes(keyword))
				);

				if (filteredHotels.length > 0) {
					uni.showToast({
						title: `找到 ${filteredHotels.length} 个结果`,
						icon: 'success'
					});
					// 这里可以更新显示的酒店列表
				} else {
					uni.showToast({
						title: '未找到相关酒店',
						icon: 'none'
					});
				}
			}, 1000);
		},
		getCurrentLocation() {
			uni.showLoading({
				title: '正在定位...'
			});

			// 获取当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					uni.hideLoading();
					console.log('当前位置：', res);

					// 模拟根据经纬度获取城市信息
					this.getCityByLocation(res.latitude, res.longitude);
				},
				fail: (err) => {
					uni.hideLoading();
					console.log('定位失败：', err);

					uni.showModal({
						title: '定位失败',
						content: '无法获取您的位置信息，请检查定位权限设置',
						showCancel: false
					});
				}
			});
		},
		getCityByLocation(latitude, longitude) {
			// 模拟根据经纬度获取城市
			uni.showToast({
				title: '已定位到当前城市',
				icon: 'success'
			});

			// 这里可以调用地图API获取具体城市信息
			// 暂时模拟设置为西安
			this.currentCity = '西安';
		},
		showDatePicker() {
			this.calendarVisible = true;
		},
		confirm(e) {
			this.calendarVisible = false;
			const start = e[0];
			const end = e[e.length - 1];
			const startArr = start.split("-");
			const endArr = end.split("-");
			this.checkInDate = `${startArr[1]}.${startArr[2]}`;
			this.checkOutDate = `${endArr[1]}.${endArr[2]}`;
			this.nightsCount = e.length;
		},
		showSortMenu() {
			uni.showActionSheet({
				itemList: ['综合排序', '价格从低到高', '价格从高到低', '距离最近', '评分最高'],
				success: (res) => {
					const sorts = ['综合排序', '价格从低到高', '价格从高到低', '距离最近', '评分最高'];
					this.currentSort = sorts[res.tapIndex];
				}
			});
		},
		showGuestMenu() {
			uni.showActionSheet({
				itemList: ['1人', '2人', '3人', '4人', '5人以上'],
				success: (res) => {
					this.guestCount = res.tapIndex + 1;
				}
			});
		},
		showLocationMenu() {
			uni.showActionSheet({
				itemList: ['不限', '高新区', '雁塔区', '碑林区', '未央区', '莲湖区'],
				success: (res) => {
					const locations = ['', '高新区', '雁塔区', '碑林区', '未央区', '莲湖区'];
					this.selectedLocation = locations[res.tapIndex];
				}
			});
		},
		showPriceMenu() {
			uni.showActionSheet({
				itemList: ['不限', '100以下', '100-200', '200-300', '300-500', '500以上'],
				success: (res) => {
					const prices = ['', '100以下', '100-200', '200-300', '300-500', '500以上'];
					this.priceRange = prices[res.tapIndex];
				}
			});
		},
		showFilterPanel() {
			console.log('显示筛选面板');
		},
		toggleTag(index) {
			this.tagList[index].active = !this.tagList[index].active;
		},
		toggleFavorite(index) {
			this.hotelList[index].isFavorite = !this.hotelList[index].isFavorite;
			uni.showToast({
				title: this.hotelList[index].isFavorite ? '已收藏' : '已取消收藏',
				icon: 'none'
			});
		},
		goToHotelDetail(hotel) {
			console.log('跳转到酒店详情', hotel);
			uni.navigateTo({
				url: `/pages/hotel/hotelDetail?hotelId=${hotel.id}&hotelName=${encodeURIComponent(hotel.name)}`
			});
		},
		handleImageError() {
			console.log('图片加载失败');
		},
		refreshData() {
			this.isRefreshing = true;
			setTimeout(() => {
				this.isRefreshing = false;
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			}, 1500);
		},
		loadMore() {
			if (this.isLoading || !this.hasMore) return;

			this.isLoading = true;
			setTimeout(() => {
				// 模拟加载更多数据
				const newHotels = [
					{
						id: this.hotelList.length + 1,
						name: '新加载的酒店',
						image: '/static/temp/cate6.jpg',
						rating: 4.5,
						reviews: 100,
						distance: '3.0km',
						address: '西安新地址',
						tags: ['新酒店'],
						originalPrice: 200,
						currentPrice: 180,
						hasCoupon: false,
						hasBreakfast: false,
						isFavorite: false,
						discount: ''
					}
				];

				this.hotelList.push(...newHotels);
				this.isLoading = false;

				// 模拟没有更多数据
				if (this.hotelList.length >= 10) {
					this.hasMore = false;
				}
			}, 1000);
		}
	}
}
</script>

<style lang="scss">
@font-face {
	font-family: 'yticon';
	src: url('/static/yticon.ttf');
}

.yticon {
	font-family: 'yticon';
}

page {
	background: #f5f5f5;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* 顶部搜索栏 */
.header-section {
	background: #fff;
	padding-top: var(--status-bar-height);

	.top-bar {
		display: flex;
		align-items: center;
		height: 88upx;
		padding: 0 30upx;

		.back-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			margin-right: 20upx;

			.icon-left {
				font-size: 36upx;
				color: #303133;
			}
		}

		.city-selector {
			display: flex;
			align-items: center;
			margin-right: 20upx;
			font-size: 24upx;
			gap: 4upx;

			.city-name {
				color: #303133;
				font-weight: 500;
				margin-right: 8upx;
			}
		}

		.search-wrapper {
			flex: 1;
			margin-right: 20upx;

			::v-deep .u-input {
				background-color: #f8f8f8 !important;
				border: none;
			}

			.search-box {
				display: flex;
				align-items: center;
				height: 60upx;
				padding: 0 20upx;
				background: #f8f8f8;
				border-radius: 30upx;
				border: 1px solid #e0e0e0;

				.icon-search {
					font-size: 32upx;
					color: #909399;
					margin-right: 12upx;
				}

				.search-placeholder {
					font-size: 28upx;
					color: #909399;
				}
			}
		}

		.location-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			background: #f8f8f8;
			border-radius: 50%;

			.icon-location {
				font-size: 36upx;
				color: #303133;
			}
		}
	}

	.date-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
		padding: 0 30upx;
		background: #fff;
		border-top: 1px solid #f0f0f0;

		.date-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;

			.date-label {
				font-size: 24upx;
				color: #909399;
				margin-bottom: 8upx;
			}

			.date-value {
				font-size: 32upx;
				color: #00D4AA;
				font-weight: 500;
			}
		}

		.nights-info {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;

			.nights {
				font-size: 24upx;
				color: #909399;
				padding: 8upx 16upx;
				background: #f0f0f0;
				border-radius: 12upx;
			}
		}
	}
}

/* 筛选栏 */
.filter-section {
	display: flex;
	align-items: center;
	height: 88upx;
	padding: 0 30upx;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;

	.filter-item {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
		position: relative;

		&.active {
			text {
				color: #fa436a;
			}
		}

		text {
			font-size: 28upx;
			color: #303133;
			transition: color 0.3s;
		}

		.icon-down {
			font-size: 24upx;
			color: #909399;
			margin-left: 8upx;
			transition: transform 0.3s;
		}
	}

	.filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60upx;
		height: 60upx;
		position: relative;

		&.active {
			.icon-filter {
				color: #fa436a;
			}
		}

		.icon-filter {
			font-size: 36upx;
			color: #303133;
			transition: color 0.3s;
		}

		.filter-dot {
			position: absolute;
			top: 8upx;
			right: 8upx;
			width: 12upx;
			height: 12upx;
			background: #fa436a;
			border-radius: 50%;
		}
	}
}

/* 标签栏 */
.tag-section {
	background: #fff;
	padding: 20upx 0;

	.tag-scroll {
		white-space: nowrap;
	}

	.tag-wrapper {
		display: flex;
		padding: 0 30upx;

		.tag-item {
			display: flex;
			align-items: center;
			height: 60upx;
			padding: 0 24upx;
			margin-right: 20upx;
			background: #f8f8f8;
			border-radius: 30upx;
			white-space: nowrap;
			transition: all 0.3s;

			&.active {
				background: #fa436a;
				transform: scale(1.05);

				text {
					color: #fff;
				}
			}

			text {
				font-size: 28upx;
				color: #303133;
				transition: color 0.3s;
			}
		}
	}
}

/* 酒店数量统计 */
.hotel-count {
	padding: 20upx 30upx;
	background: #f5f5f5;

	text {
		font-size: 24upx;
		color: #909399;
	}
}

/* 酒店列表 */
.hotel-list {
	flex: 1;
	padding: 0 30upx 20upx;
}

.hotel-item {
	display: flex;
	padding: 30upx;
	margin-bottom: 20upx;
	background: #fff;
	border-radius: 16upx;
	box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.08);
	transition: transform 0.3s;

	&:active {
		transform: scale(0.98);
	}

	.hotel-image {
		position: relative;
		width: 200upx;
		height: 200upx;
		margin-right: 24upx;
		border-radius: 12upx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			transition: transform 0.3s;
		}

		&:active {
			image {
				transform: scale(1.1);
			}
		}

		/* 收藏按钮样式暂时隐藏
		.favorite-btn {
			position: absolute;
			top: 16upx;
			right: 16upx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48upx;
			height: 48upx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			transition: transform 0.3s;
			
			&:active {
				transform: scale(1.2);
			}
			
			.yticon {
				font-size: 28upx;
				color: #fff;
				transition: color 0.3s;
			}
			
			.icon-heart-fill {
				color: #fa436a;
			}
		}
		*/

		.discount-tag {
			position: absolute;
			top: 16upx;
			left: 16upx;
			padding: 6upx 12upx;
			background: linear-gradient(135deg, #ff6b6b, #fa436a);
			border-radius: 8upx;

			text {
				font-size: 20upx;
				color: #fff;
				font-weight: 500;
			}
		}
	}

	.hotel-info {
		flex: 1;
		display: flex;
		flex-direction: column;

		.hotel-name {
			font-size: 32upx;
			color: #303133;
			font-weight: 500;
			line-height: 1.4;
			margin-bottom: 12upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.rating-section {
			display: flex;
			align-items: center;
			margin-bottom: 12upx;

			.rating-box {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 60upx;
				height: 32upx;
				padding: 0 8upx;
				background: #FF9500;
				border-radius: 4upx;
				margin-right: 12upx;

				.rating {
					font-size: 24upx;
					color: #fff;
					font-weight: 500;
				}
			}

			.reviews {
				font-size: 24upx;
				color: #909399;
				margin-right: 12upx;
			}

			.star-rating {
				display: flex;
				align-items: center;

				.star {
					font-size: 20upx;
					color: #ddd;
					margin-right: 2upx;

					&.filled {
						color: #FF9500;
					}
				}
			}
		}

		.location-info {
			display: flex;
			align-items: center;
			margin-bottom: 16upx;

			.icon-location {
				font-size: 24upx;
				color: #909399;
				margin-right: 8upx;
			}

			.distance {
				font-size: 24upx;
				color: #909399;
				margin-right: 16upx;
			}

			.address {
				font-size: 24upx;
				color: #909399;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.hotel-tags {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 16upx;

			.hotel-tag {
				padding: 4upx 12upx;
				margin-right: 12upx;
				margin-bottom: 8upx;
				background: #f0f0f0;
				border-radius: 12upx;
				font-size: 20upx;
				color: #606266;
			}
		}

		.price-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: auto;

			.left-info {
				display: flex;
				align-items: center;
				gap: 8upx;

				.coupon-tag,
				.breakfast-tag {
					padding: 4upx 12upx;
					background: #fa436a;
					border-radius: 4upx;

					text {
						font-size: 20upx;
						color: #fff;
					}
				}

				.breakfast-tag {
					background: #00D4AA;
				}
			}

			.price-info {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.original-price {
					font-size: 24upx;
					color: #909399;
					text-decoration: line-through;
					margin-bottom: 4upx;
				}

				.current-price-row {
					display: flex;
					align-items: baseline;

					.current-price {
						font-size: 40upx;
						color: #fa436a;
						font-weight: 500;
					}

					.price-unit {
						font-size: 24upx;
						color: #fa436a;
						margin-left: 4upx;
					}
				}
			}
		}
	}
}

/* 加载更多 */
.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100upx;

	.loading-text {
		font-size: 28upx;
		color: #909399;
	}
}

/* 没有更多数据 */
.no-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80upx;

	text {
		font-size: 24upx;
		color: #c0c0c0;
	}
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400upx;

	.empty-image {
		width: 200upx;
		height: 150upx;
		margin-bottom: 30upx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32upx;
		color: #909399;
		margin-bottom: 12upx;
	}

	.empty-tip {
		font-size: 24upx;
		color: #c0c0c0;
	}
}
</style>